<template>
  <div class="container">
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'reader'">
      <el-form :inline="true" :model="readerQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="读写器名称">
          <el-input v-model="readerQueryParam.deviceName" placeholder="请输入读写器名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="readerOnSubmit">查询</el-button>
          <el-button @click="readerRest">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-plus" @click="readerAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else-if="activeName === 'door'">
      <el-form :inline="true" :model="doorQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="通道门名称">
          <el-input v-model="doorQueryParam.deviceName" placeholder="请输入通道门名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doorOnSubmit">查询</el-button>
          <el-button @click="doorRest">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-plus" @click="doorAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <el-form :inline="true" :model="printerQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="打印机名称">
          <el-input v-model="printerQueryParam.deviceName" placeholder="请输入打印机名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="printerOnSubmit">查询</el-button>
          <el-button @click="printerRest">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-plus" @click="printerAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="读写器" name="reader">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="readerTableData" border style="width: 100%" height="55vh">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column v-for="item of readerTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width" show-overflow-tooltip>
              <template #default="scope">
                <span v-if="item.prop === 'disabledFlag'">
                  <el-switch v-model="scope.row.disabledFlag" active-color="#13ce66" :active-value="0"
                    :inactive-value="1" @change="readerDisabled(scope.row)">
                  </el-switch>
                </span>
                <span v-else-if="item.prop === 'deviceType'">
                  <el-tag v-if="scope.row.deviceType == 0">超高频</el-tag>
                  <el-tag v-if="scope.row.deviceType == 1">高频</el-tag>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="180">
              <template slot-scope="{ row }">
                <el-button icon="el-icon-edit" link size="mini" @click="readerEdit(row)">编辑</el-button>
                <el-popconfirm class="button10Left" title="确定要删除吗？" @confirm="() => readerDel(row)">
                  <el-button slot="reference" icon="el-icon-delete" link size="mini"
                    class="danger_button">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="通道门" name="door">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="doorTableData" border style="width: 100%" height="55vh">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column v-for="item of doorTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width" show-overflow-tooltip>
              <template #default="scope">
                <div v-if="item.prop === 'disabledFlag'">
                  <el-tag v-show="scope.row.disabledFlag == 0" type="success">启用</el-tag>
                  <el-tag v-show="scope.row.disabledFlag == 1" type="danger">停用</el-tag>
                </div>
                <div v-else>{{ scope.row[item.prop] }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="180">
              <template slot-scope="{ row }">
                <el-button icon="el-icon-edit" link size="mini" @click="doorEdit(row)">编辑</el-button>
                <el-popconfirm class="button10Left" title="确定要删除吗？" @confirm="() => doorDel(row)">
                  <el-button slot="reference" icon="el-icon-delete" link size="mini"
                    class="danger_button">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="打印机" name="printer">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="printerTableData" border style="width: 100%" height="55vh">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column v-for="item of printerTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width" show-overflow-tooltip>
              <template #default="scope">
                <div v-if="item.prop === 'disabledFlag'">
                  <el-switch v-model="scope.row.disabledFlag" active-color="#13ce66" :active-value="0"
                    :inactive-value="1" @change="printerDisabled(scope.row)">
                  </el-switch>
                </div>
                <div v-else>{{ scope.row[item.prop] }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="180">
              <template slot-scope="{ row }">
                <el-button icon="el-icon-edit" link size="mini" @click="printerEdit(row)">编辑</el-button>
                <el-popconfirm class="button10Left" title="确定要删除吗？" @confirm="() => printerDel(row)">
                  <el-button slot="reference" icon="el-icon-delete" link size="mini"
                    class="danger_button">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'reader'">
      <pagination ref="readerpagination" :totalCount="readerTotalCount" @pagination="readerPagination"></pagination>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else-if="activeName === 'door'">
      <pagination ref="doorpagination" :totalCount="doorTotalCount" @pagination="doorPagination"></pagination>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <pagination ref="printerpagination" :totalCount="printerTotalCount" @pagination="printerPagination"></pagination>
    </el-card>
    <reader-dialog ref="readerDialog" @ok="readerLoadData"></reader-dialog>
    <door-dialog ref="doorDialog" @ok="doorLoadData"></door-dialog>
    <printer-dialog ref="printerDialog" @ok="printerLoadData"></printer-dialog>
  </div>
</template>

<script>
import { readerPageList, delReader, disabledReader } from '@/api/bas/rfidReader'
import { doorPageList, delDoor } from '@/api/bas/rfidDoor'
import { printerPageList, delPrinter, disablePrinter } from '@/api/bas/printer'
import readerDialog from '@/views/Setting/device/readerDialog.vue'
import doorDialog from '@/views/Setting/device/doorDialog.vue'
import printerDialog from '@/views/Setting/device/printerDialog.vue'
export default {
  name: 'RFIDdevice',
  components: { readerDialog, doorDialog, printerDialog },
  data() {
    return {
      activeName: 'reader',
      readerTotalCount: 0,
      //查询条件
      readerSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      readerQueryParam: {
        labelType: 1,
      },
      readerTableData: [],
      readerTableProps: [
        { title: '读写器名称', prop: 'deviceName', width: '', checked: true },
        { title: '读写器类型', prop: 'deviceType', width: '', checked: true },
        { title: '读写器IP', prop: 'deviceIp', width: '', checked: true },
        { title: '端口', prop: 'devicePort', width: '', checked: true },
        { title: '状态', prop: 'disabledFlag', width: '', checked: true },
        { title: '备注', prop: 'note', width: '150', checked: true },
      ],
      // ============
      doorTotalCount: 0,
      //查询条件
      doorSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      doorQueryParam: {
        labelType: 0,
      },
      doorTableData: [],
      doorTableProps: [
        { title: 'UID', prop: 'uid', width: '', checked: true },
        { title: '通道门名称', prop: 'deviceName', width: '', checked: true },
        { title: 'IP', prop: 'deviceIp', width: '', checked: true },
        { title: '端口', prop: 'devicePort', width: '', checked: true },
        { title: '状态', prop: 'disabledFlag', width: '', checked: true },
        { title: '备注', prop: 'note', width: '', checked: true },
      ],
      // =================
      printerTotalCount: 0,
      //查询条件
      printerSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      printerQueryParam: {
        labelType: 0,
      },
      printerTableData: [],
      printerTableProps: [
        { title: '打印机名称', prop: 'deviceName', width: '', checked: true },
        { title: '打印机IP', prop: 'deviceIp', width: '', checked: true },
        { title: '端口', prop: 'devicePort', width: '', checked: true },
        { title: '状态', prop: 'disabledFlag', width: '', checked: true },
      ],
    }
  },
  mounted() {
    this.readerLoadData()
    this.doorLoadData()
    this.printerLoadData()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'door') {
        this.doorTableData = []
        this.doorLoadData()
      } else if (tab.name === 'reader') {
        this.readerTableData = []
        this.readerLoadData()
      } else if (tab.name === 'printer') {
        this.printerTableData = []
        this.printerLoadData()
      }
    },
    // ===================================读写器===================================
    readerOnSubmit() {
      this.$refs.readerpagination.resetPagination()
    },
    readerRest() {
      this.readerQueryParam = {}
      this.$refs.readerpagination.resetPagination()
    },
    readerAdd() {
      this.$refs.readerDialog.add()
    },
    readerLoadData() {
      var param = Object.assign(this.readerQueryParam, this.readerSearchModel)
      readerPageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.readerTableData = res.data.data.records
            this.readerTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    readerPagination(val) {
      this.readerSearchModel.pageNo = val.page
      this.readerSearchModel.pageSize = val.limit
      this.readerLoadData()
    },
    readerEdit(row) {
      this.$refs.readerDialog.edit(row)
    },
    readerDel(row) {
      delReader(row.deviceId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.readerLoadData()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    readerDisabled(row) {
      const param = {
        deviceId: row.deviceId,
        disabledFlag: row.disabledFlag,
      }
      disabledReader(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.readerLoadData()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // ===================================档案===================================
    doorOnSubmit() {
      this.$refs.doorpagination.resetPagination()
      this.doorLoadData()
    },
    doorRest() {
      this.$refs.doorpagination.resetPagination()
      this.doorQueryParam = {}
      this.doorLoadData()
    },
    doorAdd() {
      this.$refs.doorDialog.add()
    },
    doorLoadData() {
      var param = Object.assign(this.doorQueryParam, this.doorSearchModel)
      doorPageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.doorTableData = res.data.data.records
            this.doorTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    doorPagination(val) {
      this.doorSearchModel.pageNo = val.page
      this.doorSearchModel.pageSize = val.limit
      this.doorLoadData()
    },
    doorEdit(row) {
      this.$refs.doorDialog.edit(row)
    },
    doorDel(row) {
      delDoor(row.deviceId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.doorLoadData()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // ======================================打印机===================================
    printerOnSubmit() {
      this.$refs.printerpagination.resetPagination()
      this.printerLoadData()
    },
    printerRest() {
      this.printerQueryParam = {}
      this.printerLoadData()
    },
    printerAdd() {
      this.$refs.printerDialog.add()
    },
    printerLoadData() {
      var param = Object.assign(this.printerQueryParam, this.printerSearchModel)
      printerPageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.printerTableData = res.data.data.records
            this.printerTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    printerPagination(val) {
      this.printerSearchModel.pageNo = val.page
      this.printerSearchModel.pageSize = val.limit
      this.printerLoadData()
    },
    printerEdit(row) {
      this.$refs.printerDialog.edit(row)
    },
    printerDel(row) {
      delPrinter(row.deviceId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.printerLoadData()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    printerDisabled(row) {
      const param = {
        deviceId: row.deviceId,
        disabledFlag: row.disabledFlag,
      }
      disablePrinter(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.printerLoadData()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/tabs.less';

.el-tabs__item {
  height: 33.3%;
}

.el-tabs__header {
  height: 60vh !important;
}

.demo-form-inline {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
